<template>
    <div class="home">
        <h1>Element Plus 组件二次封装演示</h1>
        <p>{{ welcome }}</p>
        <!-- 按钮组件演示 -->
        <my-el-card header="按钮组件 (ElButton)">
            <div class="demo-section">
                <my-el-button type="primary"  >主要按钮</my-el-button>
                <my-el-button type="success">成功按钮</my-el-button>
                <my-el-button type="warning">警告按钮</my-el-button>
                <my-el-button type="danger">危险按钮</my-el-button>
                <my-el-button type="info">信息按钮</my-el-button>
                <my-el-button :loading="true">加载中</my-el-button>
                <my-el-button round>圆角按钮</my-el-button>
                <my-el-button circle icon="el-icon-search"></my-el-button>
            </div>
        </my-el-card>

        <!-- 输入框组件演示 -->
        <my-el-card header="输入框组件 (ElInput)">
            <div class="demo-section">
                <my-el-input v-model="inputValue" placeholder="请输入内容" style="width: 200px; margin-right: 10px;" />
                <my-el-input v-model="passwordValue" type="password" placeholder="请输入密码" show-password
                    style="width: 200px; margin-right: 10px;" />
                <my-el-input v-model="textareaValue" type="textarea" placeholder="请输入多行文本" :rows="3" style="width: 300px;" />
            </div>
        </my-el-card>

        <!-- 表格组件演示 -->
        <my-el-card header="表格组件 (ElTable)">
            <my-el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column prop="email" label="邮箱" width="200" />
                <el-table-column prop="role" label="角色" width="120" />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <my-el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
                            {{ scope.row.status }}
                        </my-el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <my-el-button size="small" @click="handleEdit(scope.row)">编辑</my-el-button>
                        <my-el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</my-el-button>
                    </template>
                </el-table-column>
            </my-el-table>
        </my-el-card>

        <!-- 表单组件演示 -->
        <my-el-card header="表单组件 (ElForm)">
            <my-el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <my-el-input v-model="formData.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <my-el-input v-model="formData.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="角色" prop="role">
                    <my-el-select v-model="formData.role" placeholder="请选择角色">
                        <el-option label="管理员" value="admin" />
                        <el-option label="普通用户" value="user" />
                    </my-el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <my-el-switch v-model="formData.status" />
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="formData.type">
                        <my-el-radio label="type1">类型1</my-el-radio>
                        <my-el-radio label="type2">类型2</my-el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="爱好">
                    <el-checkbox-group v-model="formData.hobbies">
                        <my-el-checkbox label="reading">阅读</my-el-checkbox>
                        <my-el-checkbox label="music">音乐</my-el-checkbox>
                        <my-el-checkbox label="sports">运动</my-el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <my-el-button type="primary" @click="handleSubmit">提交</my-el-button>
                    <my-el-button @click="handleReset">重置</my-el-button>
                </el-form-item>
            </my-el-form>
        </my-el-card>

        <!-- 选择器组件演示 -->
        <my-el-card header="选择器组件 (ElSelect)">
            <div class="demo-section">
                <my-el-select v-model="selectValue" placeholder="请选择" style="width: 200px; margin-right: 10px;">
                    <el-option label="选项1" value="1" />
                    <el-option label="选项2" value="2" />
                    <el-option label="选项3" value="3" />
                </my-el-select>
                <my-el-select v-model="multipleSelect" multiple placeholder="多选" style="width: 200px;">
                    <el-option label="选项1" value="1" />
                    <el-option label="选项2" value="2" />
                    <el-option label="选项3" value="3" />
                </my-el-select>
            </div>
        </my-el-card>

        <!-- 日期选择器演示 -->
        <my-el-card header="日期选择器 (ElDatePicker)">
            <div class="demo-section">
                <my-el-date-picker v-model="dateValue" type="date" placeholder="选择日期"
                    style="width: 200px; margin-right: 10px;" />
                <my-el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" style="width: 300px;" />
            </div>
        </my-el-card>

        <!-- 标签组件演示 -->
        <my-el-card header="标签组件 (ElTag)">
            <div class="demo-section">
                <my-el-tag>默认标签</my-el-tag>
                <my-el-tag type="success">成功标签</my-el-tag>
                <my-el-tag type="info">信息标签</my-el-tag>
                <my-el-tag type="warning">警告标签</my-el-tag>
                <my-el-tag type="danger">危险标签</my-el-tag>
                <my-el-tag closable>可关闭标签</my-el-tag>
            </div>
        </my-el-card>

        <!-- 开关组件演示 -->
        <my-el-card header="开关组件 (ElSwitch)">
            <div class="demo-section">
                <my-el-switch v-model="switchValue" />
                <my-el-switch v-model="switchValue2" active-text="开启" inactive-text="关闭" />
                <my-el-switch v-model="switchValue3" active-color="#13ce66" inactive-color="#ff4949" />
            </div>
        </my-el-card>

        <!-- 单选框组件演示 -->
        <my-el-card header="单选框组件 (ElRadio)">
            <div class="demo-section">
                <my-el-radio v-model="radioValue" label="1">选项1</my-el-radio>
                <my-el-radio v-model="radioValue" label="2">选项2</my-el-radio>
                <my-el-radio v-model="radioValue" label="3">选项3</my-el-radio>
            </div>
        </my-el-card>

        <!-- 复选框组件演示 -->
        <my-el-card header="复选框组件 (ElCheckbox)">
            <div class="demo-section">
                <my-el-checkbox v-model="checkboxValue">复选框</my-el-checkbox>
                <el-checkbox-group v-model="checkboxGroup">
                    <my-el-checkbox label="选项1" />
                    <my-el-checkbox label="选项2" />
                    <my-el-checkbox label="选项3" />
                </el-checkbox-group>
            </div>
        </my-el-card>

        <!-- 对话框组件演示 -->
        <my-el-card header="对话框组件 (ElDialog)">
            <div class="demo-section">
                <my-el-button type="primary" @click="dialogVisible = true">打开对话框</my-el-button>
                <my-el-dialog v-model="dialogVisible" title="对话框标题" width="30%">
                    <span>这是一个对话框的内容</span>
                    <template #footer>
                        <span class="dialog-footer">
                            <my-el-button @click="dialogVisible = false">取消</my-el-button>
                            <my-el-button type="primary" @click="dialogVisible = false">确定</my-el-button>
                        </span>
                    </template>
                </my-el-dialog>
            </div>
        </my-el-card>

        <!-- 上传组件演示 -->
        <my-el-card header="上传组件 (ElUpload)">
            <div class="demo-section">
                <my-el-upload action="#" :auto-upload="false" :on-change="handleFileChange" :file-list="fileList">
                    <my-el-button type="primary">点击上传</my-el-button>
                    <template #tip>
                        <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
                    </template>
                </my-el-upload>
            </div>
        </my-el-card>

        <!-- 树形组件演示 -->
        <my-el-card header="树形组件 (ElTree)">
            <my-el-tree :data="treeData" :props="treeProps" @node-click="handleNodeClick" default-expand-all highlight-current
                class="demo-tree" />
        </my-el-card>
    </div>
</template>

<script>
import { mapState } from 'pinia'
import { useAppStore } from '@/stores/app'

export default {
    name: 'Home',
    data() {
        return {
            inputValue: '',
            passwordValue: '',
            textareaValue: '',
            selectValue: '',
            multipleSelect: [],
            dateValue: '',
            dateRange: [],
            switchValue: false,
            switchValue2: false,
            switchValue3: false,
            radioValue: '1',
            checkboxValue: false,
            checkboxGroup: [],
            dialogVisible: false,
            fileList: [],
            tableData: [
                { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: '启用' },
                { id: 2, name: '李四', email: 'lisi@example.com', role: '普通用户', status: '启用' },
                { id: 3, name: '王五', email: 'wangwu@example.com', role: '普通用户', status: '禁用' }
            ],
            formData: {
                username: '',
                email: '',
                role: '',
                status: false,
                type: 'type1',
                hobbies: []
            },
            formRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
                role: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ]
            },
            treeData: [
                {
                    id: 1,
                    label: '系统管理',
                    children: [
                        { id: 11, label: '用户管理' },
                        { id: 12, label: '角色管理' },
                        { id: 13, label: '权限管理' }
                    ]
                },
                {
                    id: 2,
                    label: '数据管理',
                    children: [
                        { id: 21, label: '数据导入' },
                        { id: 22, label: '数据导出' },
                        { id: 23, label: '数据备份' }
                    ]
                }
            ],
            treeProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    computed: {
        ...mapState(useAppStore, ['welcome'])
    },
    methods: {
        handleEdit(row) {
            console.log('编辑:', row)
            this.$message.info(`编辑用户: ${row.name}`)
        },
        handleDelete(row) {
            console.log('删除:', row)
            this.$message.warning(`删除用户: ${row.name}`)
        },
        handleSubmit() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    console.log('表单数据:', this.formData)
                    this.$message.success('提交成功！')
                } else {
                    this.$message.error('请检查表单数据！')
                }
            })
        },
        handleReset() {
            this.$refs.formRef.resetFields()
            this.$message.info('表单已重置')
        },
        handleNodeClick(data) {
            console.log('点击节点:', data)
            this.$message.info(`点击了: ${data.label}`)
        },
        handleFileChange(file, fileList) {
            console.log('文件变化:', file, fileList)
            this.fileList = fileList
            this.$message.success('文件选择成功！')
        }
    }
}
</script>

<style scoped lang="scss">
.home {
    padding: 20px;
}

.home h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #303133;
}

.demo-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.demo-tree {
    max-height: 300px;
    overflow-y: auto;
}
</style> 